<template>
  <div class="figure flex-middle-x">
    <navigator :title="title"
               :currmode="true"
               :leftClickCallback="actionReturn"
    >
    </navigator>
    <div class="backgrounf-fiexd" v-if="backgroundFiexd"></div>
    <img class="spell-it-figure-background" :src="spellItFigureBackground" alt="">
    <img class="start spell-activity-center"
         :src="spellPlayCenter"
         @click="actionClickActivityCenter"
         alt="">
    <div class="spell-countdown" @click="actionComplete">
      <img :src="spellCountdown" alt="" >
      <p class="title">倒计时</p>
      <p class="time" v-if="countdownTime !=='加载中'">{{countdownTime}}S</p>
    </div>
    <div class="spell-progress-bar">
      <div>
        <img class="spell-end" :src="spellEnd" alt="">
      </div>
      <img class="spell-progress" :src="spellProgressBar" alt="">
    </div>
    <div class="spell-photo-frame">
      <img class="spell-photo" :src="spellPhoto" alt="">
      <div class="content">
        <!--改这里《《《《-->
        <img src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/man250.jpg" alt="">
        <!--改这里》》》》-->
        <p>完整拼图示例</p>
      </div>
    </div>
    <div class="spell-text flex-middle-x layout-flex-center"
    >
      <span class="record" @click="actionClickRecord">中奖记录</span>
      <span class="rules" @click="actionClickRules">活动细则</span>
    </div>
    <div id="wrap">
      <div id="left">
        <ul>
          <li id="start">
            <span class="start-span" style="pointer-events: none;">
            </span>
            <span>
              <img class="spell-start"
                   v-if="playNum > 0"
                   :src="spellStart" alt="">
              <img class="spell-start"
                   v-else=""
                   :src="spellStartEnd" alt="">
            </span>
          </li>
          <li id="level" style="opacity:0;pointer-events: none;">
            <span class="start-span">3x3</span>
          </li>
        </ul>
      </div>
      <div id="right">
        <div id="imgArea"></div>
      </div>
    </div>
    <!--玩法介绍-->
    <div class="activity-is-introduced" v-if="isFinishPlay">
      <div class="mask"></div>
      <div class="introduced-box">
        <img class="introduced-close"
             :src="introducedClose"
             @click="actionClickPlayClose"
             alt="">
        <img class="introduced-title" :src="playTitle" alt="">
        <img class="introduced-background" :src="introducedBackground" alt="">
        <div>
          <p v-for="item in spellPlayList">
            {{item.name}}
          </p>
        </div>
      </div>
    </div>
    <!--中奖记录-->
    <div class="spell-winning-record" v-if="isFinishWinningRecord">
      <div class="spell-record-background"></div>
      <div class="spell-record-box">
        <img class="record-background" :src="recordBackground" alt="">
        <img class="record-title" :src="recordTitle" alt="">
        <!--奖品区域-->
        <div class="record-prize">
          <img class="record-no-prize"
               v-if="isFinishNoPrize && isFinishTicket === 0"
               :src="recordNoPrize" alt="">
          <img class="record-miss"
               v-else-if="isFinishMiss && isFinishTicket === 0"
               :src="recordMiss" alt="">
          <div v-else-if="isFinishTicket === 2">
            <!--改这里《《《《-->
            <img class="record-ticket"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-ticket.png" alt="">
            <!--改这里》》》》-->
            <img class="record-ticket-number" :src="movieTicketImg" alt="">
          </div>
        </div>
        <img class="record-button"
             :src="recordButton"
             @click="actionClickRecordClose"
             alt="">
      </div>
    </div>
    <!--活动提示-->
    <div class="prompt-information-box" v-if="isFinishPrompt">
      <div class="prompt-background"></div>
      <div class="prompt-backdrop">
        <img class="prompt-backdrop-img"
             :src="recordBackground" alt="">
        <p class="prompt-prompting">提示</p>
        <p class="prompt-prizes">{{promptMessage}}</p>
        <img class="prompt-alert-button"
             :src="recordButton" alt=""
             @click="actionPromptDetermine"
        >
      </div>
    </div>
    <!--倒计时-->
    <div class="third-activity-timing" v-if="fingType">
      <div class="third-timing-background"></div>
      <img class="third-timing-img"
           src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/fingxpgy.png"
           alt="">
      <div class="third-timing-time">
        <img :src="fingerBig" alt="">
      </div>
    </div>
    <!--获奖提示-->
    <div class="winning-popup-window" v-if="isFinishWinning">
      <div class="popup-window-background"></div>
      <div class="winning-frame">
        <img class="winning-title"
             src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/xpgy2.png" alt="">
        <div class="winning-content">
          <img class="winning-img"
               src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/prizes-window.png"
               alt="">
          <img class="winning-txt" v-if="isFinishTicket"
               src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/prize-txt.png"
               alt="">
          <div v-if="isFinishTicket == 1">
            <img
              src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/xyd.png"
              alt="">
            <img class="beans"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x500.png" alt="">
          </div>
          <div v-else-if="isFinishTicket == 2">
            <!--改这里《《《《-->
            <img
              src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-ticket.png"
              alt="">
            <!--改这里》》》》-->
            <img class="movie-ticket" :src="movieTicketImg" alt="">
          </div>
          <div v-else="" class="prompt-not-winning">
            <img
              src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/prompt-not-winning.png"
              alt="">
          </div>
        </div>
        <img class="winning-button"
             src="https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/button.png" alt=""
             @click="actionAlert"
        >
      </div>
    </div>
    <!--退出提示-->
    <div class="prompt-box" v-if="isFinishShowPrompt">
      <div class="back"></div>
      <div class="backdrop">
        <img class="backdrop-img" src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/recordImg.png"
             alt="">
        <p class="prompting">提示</p>
        <p class="prizes">{{promptMessage}}</p>
        <img class="close"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button-close.png" alt=""
             @click="actionPromptClose"
        >
        <img class="determine"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
             @click="actionDetermine"
        >
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery';
//  import NetworkActivity from '@/network/NetworkActivity'
  export default {
    data(){
      return {
//        改这里《《《《
        filmName:'头号玩家',
        spellItFigureBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-it-figure-background1.jpg',
        spellPlayCenter:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-play-center.png',
        spellStart:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/spell-button.png',
        spellStartEnd:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/spell-button-end.png',
        spellPhoto:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/role-photo.png',
//        改这里》》》》
        countdownTime:'加载中',
        title:'拼图活动',
        spellCountdown:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/spell-countdown.png',
        spellProgressBar:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/spell-progress-bar.png',
        spellEnd:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/spell-end.png',
        introducedClose:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/introduced-close.png',
        playTitle:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/play-title.png',
        introducedBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/introduced-background.png',
        recordBackground:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/record-background.png',
        recordTitle:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/record-title.png',
        recordButton:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/record-button.png',
        recordMiss:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/miss.png',
        recordNoPrize:'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/no-prize.png',
        isFinishPlay:false,
        isFinishWinningRecord:false,
        movieTicketNumber:'观影券X1',
        isFinishNoPrize:true,
        isFinishMiss:false,
        isFinishTicketRecord:false,
        isFinishPrompt: false,
        isFinishShowPrompt: false,
        promptMessage: '',
        fingerLastNum: 3,
        intervalid: '',
        fingType: false,
        fingerBig: 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/hdimg-s4.png',
        isFinishWinning: false,
        isFinishTicket: 0,
        prizeMap: [],
        robPath: '',
        random: '',
        jigsawNum: 9,
        answer: '',
        playNum: 0,
        playNumType: 0,
        playSum: 1,
        isUpvoke: 0,
        playExit:1,
        WinningRecord:false,
        timeExit:false,
        backgroundFiexd:false,
        pg:{}
      }
    },
    computed:{
      robType: function () {
        return this.$route.query.robType;
      },
      robId: function () {
        return this.$route.query.robId;
      },
      spellPlayList(){
        return [
          {name:'1.用户需在一分钟内完成拼图，每位用户有一次参与活动的机会，拼图成功可参与抽奖。'},
          {name:'2.抽奖有机会获得1-3张《' + this.filmName + '》10元观影券。'},
          {name:'3.拖动图片与示例相同视为拼图成功。'}
        ]
      },
      movieTicketImg() {
        if (this.movieTicketNumber === '观影券X1') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x1.png';
        } else if (this.movieTicketNumber === '观影券X2') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x2.png';
        } else if (this.movieTicketNumber === '观影券X3') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/x3.png';
        } else {
          return null;
        }
      }
    },
    methods:{
      actionPromptClose() {
        this.isFinishShowPrompt = false;
      },
      actionDetermine() {
        this.isFinishShowPrompt = false;
//        用户离开，剥夺抽奖资格传2
        this.getJigSawTimeOut(2);
        if (this.playExit === 1){
          this.$router.back();
        } else if (this.playExit === 2){
          //        改这里《《《《
          this.$router.push({name:'roleRuleView'});
          //        改这里》》》》
        }
      },
      actionReturn(){
        this.playExit = 1;
        if (this.hasStart){
          this.promptMessage = '退出将放弃抽奖资格！';
          this.isFinishShowPrompt = true;
        } else {
          this.$router.back();
        }
      },
      actionClickRules(){
        this.playExit = 2;
        if (this.hasStart){
          this.promptMessage = '退出将放弃抽奖资格！';
          this.isFinishShowPrompt = true;
        } else {
          //        改这里《《《《
          this.$router.push({name:'roleRuleView'});
          //        改这里》》》》
        }
      },
      actionPromptDetermine() {
        this.isFinishPrompt = false;
        if (this.promptMessage === '活动未开始，请耐心等待!' ||
          this.promptMessage === '活动已结束，欢迎下次再来!') {
          this.$router.back();
        }
      },
      actionComplete(){
//        var self = this;
//        if (self.checkPass([0, 1, 2, 3, 4, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8])){
//          self.success();
//        }
      },
      actionAlert() {
        this.isFinishWinning = false;
      },
      actionClickRecord(){
        this.actionStatus(3);
        this.isFinishWinningRecord = true;
      },
      actionClickRecordClose(){
        if (this.WinningRecord){
          this.$router.back();
        } else {
          this.isFinishWinningRecord = false;
        }
      },
      actionClickPlayClose(){
        this.isFinishPlay = false;
      },
      actionClickActivityCenter(){
        this.isFinishPlay = true;
      },
//      获取后台信息MD5加密
      actionClickButton(){
//        测试使用
        this.countdownTime = 60;
//        this.showLoading();
//        NetworkActivity.jigsawanswer(this.robType, this.robId, this.jigsawNum).then((ret) => {
//          this.closeLoading();
//          this.answer = ret.answer + 'jbz';
//          if (ret.currentTime && ret.expireTime){
//            this.countdownTime = parseInt((ret.expireTime - ret.currentTime) / 1000);
//            if (this.countdownTime > 0){
//            } else {
//              this.countdownTime = 3;
//            }
//          }
//          /* eslint-disable */
//          this.answer = md5(this.answer);
//        }, error => {
//          this.closeLoading();
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          }
//        })
      },
//      退出页面放弃抽奖资格接口，传2放弃抽奖
      getJigSawTimeOut(type){
//        this.showLoading();
//        NetworkActivity.jigsawtimeout(this.robType, this.robId, type).then((ret) => {
//          this.closeLoading();
//          console.log(ret)
//        }, error => {
//          this.closeLoading();
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          }
//        })
      },
      /**
       * 后台封装的活动接口
       * @param robType 1
       * @param robId 后台序列号
       * @param type 1 查看用户抽奖状态，2抽奖，3，查看中奖记录
       * @returns { 抽奖状态，中奖记录，获奖奖品 }
       * advice 这个接口不想多说什么，后台最好是能优化一下~！
       * 这样把多个状态搞到一个接口上面，简直就是给前端制造噩梦！
       */
      actionStatus: function (type) {
//        this.showLoading();
//        NetworkActivity.filmVRRobStatus(this.robType, this.robId).then((ret) => {
//          this.closeLoading();
//          this.random = ret.random;
//          if (type !== 3){
//            this.playNum = this.playSum - ret.robNum;
//            this.playNumType = this.playSum - ret.robNum;
//            if (this.playNum <= 0 && type !== 2){
//              this.isFinishWinningRecord = true;
//              this.WinningRecord = true;
//            }
//          }
//          判断没有中奖提示内容是‘没有中奖记录’还是‘擦肩而过’
//          if (this.playNumType > 0){
//            this.isFinishNoPrize = true;
//            this.isFinishMiss = false;
//          } else {
//            this.isFinishNoPrize = false;
//            this.isFinishMiss = true;
//          }
//          this.prizeInformation(ret.prizeMap, ret.robNum);
//            if (ret.status === 0) {
//              this.promptMessage = ret.prizeInfo;
//              if (type === 1 && !window.sessionStorage.firstactivity) { // 页面自动加载
//              } else if (type !== 1) {
//                window.sessionStorage.firstactivity = '已抽奖';
//              }
//            } else if ((ret.status === 9)) {
//              this.isFinishPrompt = false;
//              if (type !== 3 && type !== 1) {
//                this.isFinishWinning = true;
//              }
//            } else {
//              this.promptMessage = ret.prizeInfo;
//              this.isFinishPrompt = true;
//              this.isFinishWinningRecord = false;
//            }
//        }, error => {
//          this.closeLoading();
//            this.isFinishWinningRecord = false;
//            this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      /**
       * 抽奖时掉用
       * @param robType 1
       * @param robId 后台序列号
       * @param type 用来判断是否完成了游戏，如果没有完成就传个1，
       * 清除后台给的加密数据，不传给后台，
       * 后台根据这个值存不存在来判断该用户有没有完成游戏!（不想多说的坑~不安全）
       * @returns { 抽奖状态，中奖记录，获奖奖品 }
       * advice 这个接口不想多说什么，后台最好是能优化一下~！
       */
      actionRobPath: function (type) {
//        this.showLoading();
//        NetworkActivity.filmVRRobPath(this.robType, this.robId).then((ret) => {
//          this.closeLoading();
//          this.robPath = ret.robPath;
//          this.actionRob(type);
//        }, error => {
//          this.closeLoading();
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      /**
       * 抽奖时掉用
       * @param url 地址
       * @param robType 1
       * @param robId 后台列表序号
       * @param random 后台信息防止小白
       * @param isUpvoke 助力功能：0没有，1有助力
       * @param answer MD5加密传了
       * @returns { 接口地址}
       * type 来判断用户有没有完成游戏任务，完成不传，未完成传1对MD5加密串清空！
       */
      actionRob: function (type) {
//        this.showLoading();
//        if (!type){
//          this.answer = null;
//        }
//        NetworkActivity.puzzleRob(
//          this.robPath + '/' + this.random,
//          this.robType,
//          this.robId,
//          this.random,
//          this.isUpvoke,
//          this.answer
//        ).then((ret) => {
//          console.log(ret);
//          this.closeLoading();
//          let val = this.fingerLastNum;
//          let lastImg = this.fingerLastNum;
//          this.fingerBig = 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/hdimg-s' + lastImg + '.png';
//          this.fingType = true;
//          this.intervalid = setInterval(() => {
//            val--;
//            if (val === 0) {
//              this.playNumType = 0;
//              clearInterval(this.intervalid);
//              this.fingType = false;
//              this.isFinishWinning = true;
//              this.actionStatus(2);
//            } else {
//              lastImg = val;
//              this.fingerBig = 'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/spell-activity/hdimg-s' + lastImg + '.png';
//            }
//          }, 1500)
//        }, error => {
//          this.closeLoading();
//          this.playNumType = 0;
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      /**
       * 奖品遍历方法
       * @param isFinishTicket 奖品
       * @returns { 1：幸运豆 2：优惠券 0：未中奖}
       */
      prizeInformation(prizeMap, robNum) {
        this.prizeMap = [];
        if (prizeMap) {
          for (let i in prizeMap) {
            console.log(i)
            let prizeMapList = {
              type: prizeMap[i].type,
              info: prizeMap[i].info
            };
            this.prizeMap.push(prizeMapList)
          }
//            判断后台是不是给值
          console.log(this.prizeMap)
          if (this.prizeMap.length === robNum) {
            if (this.prizeMap[this.prizeMap.length - 1].type === 1) {
              this.isFinishTicket = 1;
            } else if (this.prizeMap[this.prizeMap.length - 1].type === 2) {
              this.isFinishTicket = 2;
              this.movieTicketNumber = this.prizeMap[this.prizeMap.length - 1].info;
            } else {
              this.isFinishTicket = 0;
            }
          } else {
            this.isFinishTicket = 0;
          }
        }
      },
      imgSplit(){
//        清空正确排序的数组
        this.imgOrigArr = [];
//        必须清空图片区域的碎片代码，否则每一次拆分图片是与之前拆分的累积
//        例如第一次拆分3x3,插入了9个div，但没有清空，第二次拆分4x4，此时是在前9个div之后再插入14个div，共9+16个div
        this.imgArea.html('');
//        记录单个图片碎片的变量
        var cell = '';
        for (var i = 0; i < this.levelArr[this.levelNow][0]; i++){
          for (var j = 0; j < this.levelArr[this.levelNow][1]; j++){
//            将碎片所属div的下标存入数组，用于最终校验是否排序完成
            this.imgOrigArr.push(i * this.levelArr[this.levelNow][1] + j);
            cell = document.createElement('div');
            cell.className = 'imgCell';
            $(cell).css({
              'width':(this.cellWidth - 2) + 'px',
              'height':(this.cellHeight - 2) + 'px',
              'left':j * this.cellWidth + 'px',
              'top':i * this.cellHeight + 'px',
              'background':'url(' + this.img + ')',
              'backgroundPosition':(-j) * this.cellWidth + 'px ' + (-i) * this.cellHeight + 'px'
            });
            setTimeout(() => {
              $('.imgCell').css({
                'float': 'left',
                'position':'absolute',
                'zIndex':'10',
                'boxShadow':'0px 0px 8px transparent',
                'transitionProperty':'background-position',
                'transitionDuration':'300ms',
                'transitionTimingFunction':'ease-in-out'
              });
            }, 0)
            this.imgArea.append(cell);
          }
        }
//        碎片节点
        this.imgCells = $('#wrap #right #imgArea div.imgCell');
      },
//      更改游戏难度方法
      levelSelect(){
        var len = this.levelArr.length;
        var self = this;
        this.btnLevel.bind('touchstart', function(){
          $(this).addClass('mouseOn');
        }).bind('mouseup', function(){
          $(this).removeClass('mouseOn');
        }).bind('click', function(){
//          判断是否在游戏中
          if (self.hasStart){
            if (!window.confirm('您已经在游戏中，确定要改变游戏难度么？')){
              return false;
            } else {
              self.hasStart = 0;
              self.btnStart.text('开始');
            }
          }
//          内容改变
          self.levelNow ++;
          if (self.levelNow >= len){
            self.levelNow = 0;
          }
//          显示的难度改变
          $(this).text(self.levelArr[self.levelNow][0] + 'x' + self.levelArr[self.levelNow][1]);
//          图片重新拆分(先重新计算宽高)
          self.cellWidth = self.imgWidth / self.levelArr[self.levelNow][1];
          self.cellHeight = self.imgHeight / self.levelArr[self.levelNow][0];
          self.imgSplit();
        });
      },
//      开始游戏
      gameState(){
        var self = this;
        this.btnStart.bind('touchstart', function(){
          $(this).addClass('mouseOn');
        }).bind('touchend', function(){
          $(this).removeClass('mouseOn');
          if (self.hasStart === 0 && self.playNum > 0){
            self.backgroundFiexd = true;
            self.startNumber = 0;
            self.startClearInterval = setInterval(() => {
              self.startNumber++;
//              打乱图片
              self.randomArr();
              self.cellOrder(self.imgRandArr);
              if (self.startNumber > 5){
                clearInterval(self.startClearInterval);
                self.hasStart = 1;
                self.timeExit = false;
                self.actionClickButton();
                setTimeout(() => {
                  self.playNum--;
                  self.mjlTime = true;
//            倒计时
                  var timeSumber = 4.5;
                  var timeNumber = 4.5 / self.countdownTime;
                  self.backgroundFiexd = false;
                  self.timeClearInterval = setInterval(() => {
                    timeSumber = timeSumber - timeNumber;
                    self.countdownTime--;
                    console.log(self.countdownTime)
                    $('.spell-end').css({
                      'left': timeSumber + 'rem'
                    });
                    if (self.countdownTime < 1){
                      console.log('********')
                      // 测试使用
                      self.isFinishPrompt = true;
                      self.promptMessage = '游戏结束';
                      clearInterval(self.timeClearInterval);
                      self.hasStart = 0;
                      self.mjlTime = false;
                      self.timeExit = true;
//                    超时超过60秒请求
                      setTimeout(() => {
                        this.playNumType = 0;
                        self.actionRobPath();
                      }, 200)
//                      后台无法解决延迟问题，防止到最后1秒完成游戏请求后台提示游戏失败
                      self.countdownTime = 0
//                  游戏结束，没有完成游戏
                    }
                  }, 1000)
//            打乱图片
                  self.randomArr();
                  self.cellOrder(self.imgRandArr);
//            图片事件
                  self.imgCells.css({
                    'cursor':'pointer'
                  }).bind('mouseover', function(){
                    $(this).addClass('hover');
                  }).bind('mouseout', function(){
                    $(this).removeClass('hover');
                  }).bind('touchstart', function(e){
                    if (self.mjlTime){
//              此处是图片移动
                      $(this).css('cursor', 'move');
//              所选图片碎片的下标以及鼠标相对该碎片的位置
                      var cellIndex1 = $(this).index();
                      var cellmousex = e.touches[0].clientX - self.imgCells.eq(cellIndex1).offset().left;
                      var cellmousey = e.touches[0].clientY - self.imgCells.eq(cellIndex1).offset().top;
                      var touchX = null;
                      var touchy = null;
//                      图片移动
                      $('.figure').bind('touchmove', function(e2){
                        if (e2.touches.length === 1) {
                          self.imgCells.eq(cellIndex1).css({
                            'z-index':'40',
                            'left':(e2.touches[0].clientX - cellmousex - self.imgArea.offset().left) + 'px',
                            'top':(e2.touches[0].clientY - cellmousey - self.imgArea.offset().top) + 'px'
                          });
                          touchX = e2.touches[0].clientX;
                          touchy = e2.touches[0].clientY;
                        }
                      }).bind('touchend', function(e3){
                        self.mjlTime = false;
                        console.log(e3)
//                被交换的碎片下标
                        var cellIndex2 = self.cellChangeIndex((touchX - self.imgArea.offset().left), (touchy - self.imgArea.offset().top), cellIndex1);
//                碎片交换
                        if (cellIndex1 === cellIndex2){
                          self.cellReturn(cellIndex1);
                        } else {
                          if (self.timeExit){
                            self.cellReturn(cellIndex1);
                          } else {
                            self.cellExchange(cellIndex1, cellIndex2);
                          }
                        }
//                移除绑定
                        $('.figure').unbind('touchmove').unbind('touchend');
                      });
                    }
                  }).bind('touchend', function(){
                    $(this).css('cursor', 'pointer');
                  });
                }, self.moveTime)
              }
            }, self.moveTime)
          } else if (self.hasStart === 1){
            self.isFinishPrompt = true;
            self.promptMessage = '游戏进行中';
              return false;
//            if (!window.confirm('已经在游戏中，确定要回复原图？')){
//              return false;
//            }
//            样式恢复
//            $(this).text('开始');
//            self.hasStart = 0;
//            复原图片
//            self.cellOrder(self.imgOrigArr);
//            取消事件绑定
//            self.imgCells.css('cursor', 'default').unbind('mouseover').unbind('mouseout').unbind('touchstart');
          } else if (self.playNum <= 0) {
            self.actionClickRecord();
          }
        });
      },
//      两两图片交换位置
      cellExchange(from, to){
        var self = this;
//        被拖动图片、被交换图片所在行、列
        var rowFrom = Math.floor(this.imgRandArr[from] / this.levelArr[this.levelNow][1]);
        var colFrom = this.imgRandArr[from] % this.levelArr[this.levelNow][1];
        var rowTo = Math.floor(this.imgRandArr[to] / this.levelArr[this.levelNow][1]);
        var colTo = this.imgRandArr[to] % this.levelArr[this.levelNow][1];
        var temp = this.imgRandArr[from];
//        被拖动图片下标，临时存储
//        被拖动图片变换位置
        this.imgCells.eq(from).animate({
          'top':rowTo * this.cellHeight + 'px',
          'left':colTo * this.cellWidth + 'px'
        }, this.moveTime, function(){
          self.mjlTime = true;
          if (self.timeExit){
            self.mjlTime = false;
          }
          $(this).css('z-index', '10');
        });
//        表交换图片变换位置
        this.imgCells.eq(to).css('z-index', '30').animate({
          'top':rowFrom * this.cellHeight + 'px',
          'left':colFrom * this.cellWidth + 'px'
        }, this.moveTime, function(){
          $(this).css('z-index', '10');
//          两块图片交换存储数据
          self.imgRandArr[from] = self.imgRandArr[to];
          self.imgRandArr[to] = temp;
//          判断是否完成全部移动，可以结束游戏
          if (self.checkPass(self.imgOrigArr, self.imgRandArr)){
            self.success();
          }
        });
      },
//      打乱图片
      randomArr(){
//        清空数组
        this.imgRandArr = [];
        var order;
//        记录随机数，记录图片放置在什么位置
        for (var i = 0, len = this.imgOrigArr.length; i < len; i++){
          order = Math.floor(Math.random() * len);
          if (this.imgRandArr.length > 0){
            while ($.inArray(order, this.imgRandArr) > -1){
              order = Math.floor(Math.random() * len);
            }
          }
          this.imgRandArr.push(order);
        }
        return;
      },
      cellOrder(arr){
        for (var i = 0, len = arr.length; i < len; i++){
          this.imgCells.eq(i).animate({
            'left': arr[i] % this.levelArr[this.levelNow][1] * this.cellWidth + 'px',
            'top': Math.floor(arr[i] / this.levelArr[this.levelNow][0]) * this.cellHeight + 'px'
          }, this.moveTime);
        }
      },
//      被交换的碎片下标
      cellChangeIndex(x, y, orig){
//        鼠标拖动碎片移至大图片外
        if (x < 0 || x > this.imgWidth || y < 0 || y > this.imgHeight){
          return orig;
        }
//        鼠标拖动碎片在大图范围内移动
        var row = Math.floor(y / this.cellHeight);
        var col = Math.floor(x / this.cellWidth);
        var location = row * this.levelArr[this.levelNow][1] + col;
        var i = 0;
        var len = this.imgRandArr.length;
        while ((i < len) && (this.imgRandArr[i] !== location)){
          i++;
        }
        return i;
      },
//      回到之前图片的位置
      cellReturn(index){
        var self = this;
        var row = Math.floor(this.imgRandArr[index] / this.levelArr[this.levelNow][1]);
        var col = this.imgRandArr[index] % this.levelArr[this.levelNow][1];
        this.imgCells.eq(index).animate({
          'top':row * this.cellHeight + 'px',
          'left':col * this.cellWidth + 'px'
        }, this.moveTime, function(){
          self.mjlTime = true;
          if (self.timeExit){
            self.mjlTime = false;
          }
          $(this).css('z-index', '10');
        });
      },
//      判断图片是否完成
      checkPass(rightArr, puzzleArr){
        if (rightArr.toString() === puzzleArr.toString()){
          return true;
        }
        return false;
      },
      success(){
//        取消样式和事件绑定
        for (var i = 0, len = this.imgOrigArr.length; i < len; i++){
          if (this.imgCells.eq(i).has('mouseOn')){
            this.imgCells.eq(i).removeClass('mouseOn');
          }
        }
        this.imgCells.unbind('touchstart').unbind('mouseover').unbind('mouseout');
//        this.btnStart.text('开始');
        this.hasStart = 0;
        if (this.countdownTime === 1){
          this.countdownTime = 0;
          $('.spell-end').css({
            'left': 0 + 'rem'
          });
        }
//      测试使用
        this.isFinishPrompt = true;
        this.promptMessage = '恭喜您完成拼图';
        clearInterval(this.timeClearInterval);
        this.actionStatus(3);
        setTimeout(() => {
          this.actionRobPath(1);
        }, 500)
      },
      init(){
        this.imgSplit();
//        改变游戏难度，如果后期有需求上的体验可以打开这个方法，并增加难度按钮
//        this.levelSelect();
        this.gameState();
      },
      puzzleGame(param){
//        参数处理
//        待操作的图片
        this.img = param.img || '';
//        节点
//        开始游戏按钮
        this.btnStart = $('#wrap #left ul #start span');
//        难度选择按钮
        this.btnLevel = $('#wrap #left ul #level span');
//        图片显示区域
        this.imgArea = $('#wrap #right #imgArea');
//        用于记录碎片节点的变量
        this.imgCells = '';
//        变量
//        图片拆分后，存储正确排序的数组
        this.imgOrigArr = [];
//        图片打乱顺序后，存储当前排序的数组
        this.imgRandArr = [];
//        存储难度等级的数组
        this.levelArr = [[3, 3], [4, 4], [6, 6]];
//        表示当前难度等级的变量，与难度数组结合使用
        this.levelNow = 0;
//        图片整体的宽高
        this.imgWidth = parseInt(this.imgArea.css('width'));
        this.imgHeight = parseInt(this.imgArea.css('height'));
//        拆分为碎片后，每一块碎片的宽高
        this.cellWidth = this.imgWidth / this.levelArr[this.levelNow][1];
        this.cellHeight = this.imgHeight / this.levelArr[this.levelNow][0];
//        记录有是否开始的变量，默认fasle，未开始
        this.hasStart = 0;
//      进度条倒计时
        this.timeClearInterval = null;
//        开始动画
        this.startNumber = 0;
        this.startClearInterval = null;
//        记录animate动画的运动时间，默认400毫秒
        this.moveTime = 400;
//        控制图片完成结果
        this.mjlTime = true;
//        调用初始化函数，拆分图片,绑定按钮功能
        this.init();
      },
//      清楚定时器
      beforeRouter(){
        this.$router.beforeEach((to, from, next) => {
          //        改这里《《《《
          if (to.name === 'roleHomePageView' || to.name === 'roleRuleView'){
            //      改这里》》》》
            clearInterval(this.timeClearInterval);
            clearInterval(this.startClearInterval);
          }
          next();
        });
      }
    },
    mounted: function () {
//      测试使用
      this.playNum = 1;
      /* eslint-disable */
//      改这里《《《《
      if (document.documentElement.clientWidth > 335){
        this.pg = this.puzzleGame({'img':'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/man250.jpg'})
      } else {
        this.pg = this.puzzleGame({'img':'https://static.idoupiao.com/pdsImg/i-pufa-pds-folder/role-rule/man200.jpg'})
      }
//     改这里》》》》
      this.beforeRouter();
      this.actionStatus(1);
      document.querySelector('.figure').addEventListener('touchmove', function(e) {
        e.preventDefault();
      })
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped="">
  #wrap{
    width:100%;
    margin: auto;
    padding-left:0.4rem;
  }
  /* 左侧选项栏 */
  #left{
    width:100%;
    font-size:0.24rem;
    color:$color-4;
  }
  #left ul{
    width:100%;
  }
  /* 开始游戏与难度选择的统一样式 */
  #left ul li{
    width:100%;
    height:0.5rem;
    line-height:0.5rem;
    padding-left:0.1rem;
    position:relative;}
  #left ul li .start-span{
    display:block;
    width:0.8rem;height:0.4rem;
    line-height:0.4rem;text-align:center;
    cursor:pointer;margin:5px 20px 0 0;
    border-right:solid 1px #aaa;
    border-bottom:solid 1px #aaa;
    position:absolute;
    top:-5px;left:3rem;
    color:$color-black;
  }
  #left ul li span.mouseOn{
    border-right:none;
    border-bottom:none;
    border-top:solid 1px #aaa;
    border-left:solid 1px #aaa;
  }
  /* 游戏规则样式 */
  #gameRule p{
    width:100%;
    height:0.3rem;font-size:0.36rem;
  }
  /* 右侧图片 */
  #right{
    width:100%;
    position: fixed;
    bottom:2.7rem;left:0.35rem;
    padding:10px 0 0 10px;
    z-index:2;
  }
  #imgArea{
    width:4.5rem;height:4.5rem;
    position:relative;
  }
  #imgArea div.hover{
    filter: alpha(opacity=80);
    opacity:.8;
    box-shadow: 0px 0px 8px #000;
    z-index:20;
    border:1px solid #09F;
  }
  .figure{
    width:100%;
    height:100%;
    position: absolute;
    top:0;left:0;
    .spell-it-figure-background{
      width:100%;
      height:100%;
      position: absolute;
      top:0rem;left:0;
    }
    .spell-activity-center{
      width:0.5rem;
      position: fixed;
      top:5rem;right:0;
      z-index:3;
    }
    .spell-countdown{
      position: absolute;
      top:3.2rem;left:0.5rem;
      color:$color-4;
      font-size:0.24rem;
      img{
        width:1.4rem;
      }
      .title{
        position: absolute;
        top:15%;left:50%;
        transform: translate(-50%, 50%);
        white-space:nowrap;
      }
      .time{
        position: absolute;
        top:40%;left:50%;
        transform: translate(-50%, 50%);
      }
    }
    .spell-progress-bar{
      position: absolute;
      top:3.7rem;left:2.1rem;
      .spell-progress{
        width:4.5rem;
        z-index:1;
        position: absolute;
        top:0;left:0;
      }
      div{
        width:4.5rem;
        height:0.21rem;
        position: absolute;
        top:0.2rem;left:0;
        overflow: hidden;
        z-index:10;
        img{
          width:100%;
          height:100%;
          position: absolute;
          top:0rem;left:4.5rem;
          z-index:10;
        }
      }
    }
    .spell-start{
      width:3.25rem;
      position: fixed;
      bottom:1rem;left:2.1rem;
    }
    .spell-text{
      width:100%;
      position: fixed;
      bottom:0.3rem;left:0;
      color:$color-4;
      text-align: center;
      font-size:0.22rem;
      .record{
        margin-right:0.5rem;
      }
      span{
        border-bottom:1px solid $color-4;
      }
    }
    .spell-photo-frame{
      width:7.1rem;
      height:5.3rem;
      position: fixed;
      bottom:2.35rem;left:50%;
      z-index:2;
      transform: translate(-50%, 0);
      .spell-photo{
        width:100%;
        height:100%;
      }
      .content{
        position: absolute;
        top:50%;right:0.4rem;
        text-align: center;
        color:$color-4;
        transform: translate(0, -50%);
        img{
          width:1.5rem;
        }
        p{
          font-size:0.24rem;
          margin-top:0.1rem;
        }
      }
    }
  }
  /*玩法介绍*/
  .activity-is-introduced{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    z-index:100;
    .mask{
      width:100%;
      height:100%;
      position: fixed;
      top:0;left:0;
      background:$color-black;
      opacity: 0.5;
    }
    .introduced-box{
      width:4.8rem;
      height:5.25rem;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      text-align: left;
      margin:auto;
      animation: mymove 1s 1;
      -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
      .introduced-close{
        width:0.55rem;
        position: absolute;
        top:-0.3rem;
        right:-0.3rem;
        z-index:2;
      }
      .introduced-title{
        width:2.7rem;
        position: absolute;
        top:0.5rem;left:50%;
        transform: translate(-50%, 0);
        z-index:2;
      }
      .introduced-background{
        width:100%;
        height:100%;
        position: absolute;
        top:0;left:0;
      }
      div{
        margin-top:1.3rem;
        margin-left:0.3rem;
        position: relative;
        z-index:2;
        p{
          width:4.2rem;
          font-size:0.24rem;
          color:$color-4;
          line-height: 0.45rem;
          margin-top:0.1rem;
        }
      }
    }
  }
  /*中奖记录*/
  .spell-winning-record{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    z-index:100;
    .spell-record-background{
      width: 100%;
      height:100%;
      position: fixed;
      background: $color-black;
      opacity:0.5;
    }
    .spell-record-box{
      width:4.9rem;
      height:5.3rem;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      margin:auto;
      animation: mymove 1s 1;
      -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
      .record-background{
        width:100%;
        height:100%;
      }
      .record-title{
        width:2.9rem;
        position: absolute;
        top:0.3rem;left:50%;
        transform: translate(-50%, 0);
      }
      .record-button{
        width:2.1rem;
        position: absolute;
        top:4rem;left:50%;
        transform: translate(-50%, 0);
      }
      .record-prize{
        width:4.2rem;
        height:2.2rem;
        position: absolute;
        top:1rem;left:50%;
        transform: translate(-50%, 0);
        .record-no-prize{
          width:2rem;
          position: absolute;
          top:0;left:50%;
          transform: translate(-50%, 0);
        }
        .record-miss{
          width:3rem;
          position: absolute;
          top:0;left:50%;
          transform: translate(-50%, 0);
        }
        div{
          .record-ticket{
            width:2rem;
            position: absolute;
            top:0.6rem;left:0.3rem;
          }
          .record-ticket-number{
            width:1.3rem;
            position: absolute;
            top:0.7rem;right:0.1rem;
          }
        }
      }
    }
  }
  /*活动提示*/
  .prompt-information-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    .prompt-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .prompt-backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: mymove 1s 1;
      -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
      .prompt-backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .prompt-prompting {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 0.5rem;
        padding-top: 0.5rem;
      }
      .prompt-prizes {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 0.3rem;
        position: absolute;
        top: 2rem;
        left: 0;
        padding: 0.2rem;
      }
      .prompt-alert-button {
        width: 50%;
        position: absolute;
        top: 4.7rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
  /*倒计时*/
  .third-activity-timing {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:100;
    .third-timing-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: $color-black;
      opacity: 0.5;
    }
    .third-timing-img {
      width: 4.8rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .third-timing-time {
      width: 4rem;
      height: 4rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      img {
        width: 1rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
  /*获奖提示*/
  .winning-popup-window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:100;
    .popup-window-background {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .winning-frame {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      /*animation: fadeInDown 1s 1 linear 0s;*/
      .winning-title {
        width: 3rem;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .winning-content {
        .winning-img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .winning-txt {
          width: 2rem;
          position: absolute;
          top: 1.3rem;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: 1;
        }
        div {
          width: 3.5rem;
          position: relative;
          top: 3.1rem;
          left: 25%;
          transform: translate(0, -50%);
          z-index: 2;
          img {
            width: 1.8rem;
          }
          .movie-ticket {
            width: 1rem;
            position: relative;
            top: -0.2rem;
            left: 0.2rem;
            font-size: 0.4rem;
            color: #fff;
            z-index: 2;
          }
          .beans {
            position: relative;
            top: -0.15rem;
            left: 0.2rem;
            font-size: 0.4rem;
            color: #fff;
            z-index: 2;
          }
        }
        .prompt-not-winning {
          width: 3rem;
          position: relative;
          top: 2.8rem;
          left: 1.2rem;
          z-index: 2;
          img {
            width: 3rem;
          }
        }
      }
      .winning-button {
        width: 50%;
        position: absolute;
        top: 4.8rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
  /*退出提示*/
  .prompt-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation:mymove 1s 1;
      -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
      .backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .prompting {
        width: 100%;
        text-align: center;
        color: #fff;
        text-shadow: 0px 0px 10px blue;
        font-size: 0.5rem;
        padding-top: 0.5rem;
      }
      .prizes {
        width: 100%;
        text-align: center;
        color: #fff;
        text-shadow: 0px 0px 10px blue;
        font-size: 0.3rem;
        position: absolute;
        top: 1.5rem;
        left: 0;
        padding:0.2rem;
      }
      .close {
        width: 40%;
        position: absolute;
        left: -2.5rem;
        right: 0;
        top: 4rem;
        bottom: 0;
        margin: auto;
      }
      .determine {
        width: 40%;
        position: absolute;
        left: 2.5rem;
        right: 0;
        top: 4rem;
        bottom: 0;
        margin: auto;
      }
      .alert-button {
        width: 50%;
        position: absolute;
        top: 4.7rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
  @keyframes mymove-close {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0)
    }
  }

  @-webkit-keyframes mymove-close {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0)
    }
  }
  @keyframes mymove {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }

  @-webkit-keyframes mymove {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }
  .backgrounf-fiexd{
    width:100%;
    height:100%;
    position: fixed;
    top:0;left:0;
    z-index:100;
  }
</style>
